<template>
  <div class="demo01">
    <div id='map'></div>
    <Row>
      <Col span="24" type="flex" align="center">
        <Button type="primary" @click="setScale('max')">放大</Button>
        <Button type="primary" @click="setScale('min')">缩小</Button>
      </Col>
    </Row>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

import OSM from 'ol/source/OSM';

import Overlay from 'ol/Overlay';
import {toStringHDMS} from 'ol/coordinate';
import {toLonLat} from 'ol/proj';
import TileJSON from 'ol/source/TileJSON';

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      map: null,
      overlay:null,
      hdms:null
    }
  },
  mounted(){
    this.initMap();
  },
  methods:{
    //初始化地图
    initMap(){
      var gaodeMapLayer = new TileLayer({
        source: new XYZ({
          url: 'http://localhost:9089/roadmap/{z}/{x}/{y}.png'
        })
      });

      this.map = new Map({
        layers: [gaodeMapLayer],
        view: new View({
          center: [103.83405759641674,36.060709432547604],
          projection: 'EPSG:4326',
          zoom: 13
        }),
        target: 'map'
      });

      this.map.on('singleclick', function(evt) {debugger
        var coordinate = evt.coordinate;
        var hdms = toStringHDMS(toLonLat(coordinate));

        this.hdms = hdms;
        alert(coordinate);
        //this.overlay.setPosition(coordinate);
      });
    },
    //手动缩放
    setScale(type){
      let view = this.map.getView();
      let zoom = view.getZoom();
      let scale = type === 'max' ? zoom + 1 : zoom -1;
      view.setZoom(scale);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
  .map {
    height: 100%;
    width: 100%;
  }
  body{
    margin:0 !important;
  }
  #app{
    margin:0 !important;
  }

  #map{
    width: 100%;
    height: 80vh;
    margin-bottom: 10px;
  }
  .demo01 button{
      margin: 0px 5px;
  }
</style>
